import React from 'react'
import { useEffect, useRef } from 'react'
import GLOBAL_CESIUM from './globalCesiumData'
import { addTDTLayer } from './map'

export default function CesiumMap({ mapFinished }) {
  const cesiumContainer = useRef(null)

  const addtainqi = (viewer) => {
    viewer.scene.primitives.destroyPrimitives = false
    viewer.scene.globe.preloadAncestors = true
    viewer.scene.globe.depthTestAgainstTerrain = true

    viewer.scene.primitives.destroyPrimitives = false
    viewer.scene.globe.preloadAncestors = true
    viewer.scene.debugShowFramesPerSecond = false
    viewer.clock.currentTime = Cesium.JulianDate.fromDate(
      new Date('2024-07-10 12:00:00.000')
    )
    viewer.scene.globe.enableLighting = true
    viewer.scene.shadowMap.softShadows = false
    viewer.scene.highDynamicRange = true
    //
    // 基础场景配置
    viewer.resolutionScale = 1.0 // 分辨率
    viewer.scene.globe.depthTestAgainstTerrain = true // 深度测试
    viewer.scene.logarithmicDepthBuffer = true // log深度

    viewer.scene._czmRenderGBufferPass = [4, 7]
    // 创建渲染管线
    viewer.scene.postProcessStages = new Cesium.RenderEffectPipeline(viewer, {
      // 指数高度 + 体积雾
      heightInscatteringFog: false,
      renderLogDepth: false,
      show: false,
      // 镜头光2
      lensFlareType: 1,
    })

    viewer.postProcessStages.lights.enabled = false

    viewer.postProcessStages.fxaa.enabled = true // fxaa
    viewer.postProcessStages.hdrBloom.enabled = true // hdrBloom
    viewer.postProcessStages.skyEffect.enabled = true // skyEffect

    viewer.postProcessStages.skyEffect.volumetCloudDensity = 0.3 // 密度
    viewer.postProcessStages.skyEffect.volumetCloudToHeight = 20000 // 最小高
    viewer.postProcessStages.skyEffect.volumetCloudToHeight2 = 28000 // 最大高
    viewer.postProcessStages.skyEffect.cloudViewDis = 430807 // 可视距离
    viewer.postProcessStages.skyEffect.windSpeed = 270 // 风速

    // 指数高度雾 体积雾 需要初始化完成
    viewer.postProcessStages.skyEffect._fogByDistance.z = 5000 // 相机距离衰减
    // 雾化高度 这里用的屏幕空间的 不是地理上的 ，也可地理上的但是费性能一些
    viewer.postProcessStages.skyEffect._exponentialFogParam2.z = 6200
    // 体积混合雾
    viewer.postProcessStages.skyEffect._exponentialFogParam5.y = 0.218 // 衰减
  }

  //基础layer
  let baseLayer = ''
  let zjBaseLayer = ''
  useEffect(() => {
    // const cesiumTerrainProvider = new Cesium.CesiumTerrainProvider({
    //   requestVertexNormals: true,
    //   url: 'http://data.mars3d.cn/terrain',
    // })
    GLOBAL_CESIUM.viewer = new Cesium.Viewer(cesiumContainer.current, {
      // terrainProvider: cesiumTerrainProvider,
      animation: false, // 是否显示动画控件
      baseLayerPicker: false, // 是否显示图层选择控件
      fullscreenButton: false, // 是否显示全屏按钮控件
      vrButton: false, // 是否显示vr按钮控件
      geocoder: false, // 是否显示地名查找控件
      homeButton: false, // 是否显示主页按钮控件
      infoBox: false, // 是否显示点击要素之后显示的信息
      sceneModePicker: false, // 是否显示投影方式控件
      selectionIndicator: false, // 是否获取选择周指示器
      timeline: false, // 是否显示时间线控件
      navigationHelpButton: false, // 是否显示帮助信息控件
      useBrowserRecommendedResolution: false, // 是否以浏览器建议的分辨率渲染
      imageryProvider: false,
      shouldAnimate: true,
    })

    var handler = new Cesium.ScreenSpaceEventHandler(
      GLOBAL_CESIUM.viewer.scene.canvas
    )

    handler.setInputAction((movement) => {
      var pickedObject = GLOBAL_CESIUM.viewer.scene.pick(movement.position)
      var cartesian
      if (!pickedObject) {
        if (GLOBAL_CESIUM.viewer.scene.globe.depthTestAgainstTerrain) {
          cartesian = GLOBAL_CESIUM.viewer.scene.pickPosition(movement.position)
        } else {
          //如果没开启深度检测
          var pickRay = GLOBAL_CESIUM.viewer.scene.camera.getPickRay(
            movement.position
          )
          cartesian = GLOBAL_CESIUM.viewer.scene.globe.pick(
            pickRay,
            GLOBAL_CESIUM.viewer.scene
          )
        }
      } else {
        cartesian = GLOBAL_CESIUM.viewer.scene.pickPosition(movement.position)
      }

      var ellipsoid = GLOBAL_CESIUM.viewer.scene.globe.ellipsoid
      var cartographic = ellipsoid.cartesianToCartographic(cartesian)
      var lat = Cesium.Math.toDegrees(cartographic.latitude)
      var lng = Cesium.Math.toDegrees(cartographic.longitude)
      var height = cartographic.height
      console.log(lng + ',' + lat + ',' + height)
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

    // mapFinished()

    GLOBAL_CESIUM.viewer.scene.globe.depthTestAgainstTerrain = false

    // 去掉Logo标签
    GLOBAL_CESIUM.viewer._cesiumWidget._creditContainer.style.display = 'none'
    GLOBAL_CESIUM.viewer.scene.skyBox.show = false
    GLOBAL_CESIUM.viewer.scene.backgroundColor =
      Cesium.Color.fromCssColorString('#09293F')
    GLOBAL_CESIUM.viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(
        109.1667193307315,
        32.586637406548085,
        10024688.568649583
      ), //设置位置
      orientation: {
        heading: Cesium.Math.toRadians(1.0177774980683254e-13),
        pitch: Cesium.Math.toRadians(-89.86342985010334),
        roll: 0,
      },
    })

    addtainqi(GLOBAL_CESIUM.viewer)

    baseLayer = addTDTLayer(
      GLOBAL_CESIUM.viewer,
      window.baseLayerConfig[0].layerData[0].url
    )

    zjBaseLayer = addTDTLayer(
      GLOBAL_CESIUM.viewer,
      window.baseLayerConfig[0].layerData[1].url
    )

    return () => {
      GLOBAL_CESIUM.viewer.destroy()
    }
  }, [])
  return (
    <>
      <div ref={cesiumContainer} className="cesiumMap"></div>
    </>
  )
}
